<template>
  <el-card>
    <el-form :inline="true">
      <el-form-item label="一级分类">
        <el-select-v2
          v-model="value1"
          :options="primaryOption"
          :props="props"
          placeholder="请选择"
          style="width: 300px"
          filterable
          @change="changePrimary"
        />
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select-v2
          v-model="value2"
          :options="secondaryOptions"
          :props="props"
          placeholder="请选择"
          style="width: 300px"
          filterable
          @change="changeSecondary"
        />
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select-v2
          v-model="value3"
          :options="reclassifyOptions"
          :props="props"
          placeholder="请选择"
          style="width: 300px"
          filterable
          @change="changeData"
        />
      </el-form-item>
    </el-form>
  </el-card>

  <el-card style="margin: 10px 0">
    <el-button type="primary" size="default" icon="Plus">添加属性</el-button>
    <el-table border style="margin: 10px 0" :data="tableValue">
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="80px"
      ></el-table-column>
      <el-table-column label="属性名称" align="center">
        <template #default="{ row }">
          <pre>{{ row.property }}</pre>
        </template>
      </el-table-column>
      <el-table-column label="属性值名称" align="center">
        <template #default="{ row }">
          <el-tag
            style="margin: 5px"
            v-for="item in row.propertyTitle1"
            :key="item.id"
          >
            {{ item.content }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #="{ row }">
          <el-button type="primary" icon="Edit"></el-button>
          <el-popconfirm :title="`你确定删除${row.attrName}?`" width="200px">
            <template #reference>
              <el-button type="danger" icon="Delete"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import useCategoryStore from '@/store/modules/Category.ts'
import { ElMessage } from 'element-plus'

///表格
let tableValue = ref([])

let CategoryStore = useCategoryStore()
const props = {
  label: 'name',
  value: 'id',
}
let value1 = ref()
let value2 = ref()
let value3 = ref()

let primaryOption = ref([]) //一级分类
let secondaryOptions = ref([]) //二级分类
let reclassifyOptions = ref([]) //三级分类

/**
 * 改变一级分类触发
 * @param val 改变的id
 */
const changePrimary = async (val: any) => {
  try {
    //清空二级分类的值
    value2.value = null
    secondaryOptions.value = []
    //清空三级分类的值
    value3.value = null
    reclassifyOptions.value = []
    let result = await CategoryStore.getSecondaryStore(val)
    if (result == 'ok') {
      secondaryOptions.value = CategoryStore.secondaryTitle
    }
  } catch (error) {
    ElMessage({
      type: 'error',
      message: (error as Error).message,
    })
  }
}

/**
 * 改变二级分类触发获取三级分类
 * @param val
 */
const changeSecondary = async (val: any) => {
  try {
    value3.value = null
    reclassifyOptions.value = []
    let result = await CategoryStore.getReclassifyStore(val)
    if (result == 'ok') {
      reclassifyOptions.value = CategoryStore.reclassifyTitle
    }
  } catch (error) {
    ElMessage({
      type: 'error',
      message: (error as Error).message,
    })
  }
}

/**
 * 获取属性数据
 * @param val
 */
const changeData = async (val: any) => {
  try {
    let result = await CategoryStore.getPropertyStore(val)
    if (result == 'ok') {
      tableValue.value = CategoryStore.PropertyData
    }
  } catch (error) {
    ElMessage({
      type: 'error',
      message: (error as Error).message,
    })
  }
}

/**
 * 获取一级分类
 */
const getprimaryOption = async () => {
  try {
    const result = await CategoryStore.getPrimaryStore()
    if (result == 'ok') {
      primaryOption.value = CategoryStore.primaryTitle
    }
  } catch (error) {
    ElMessage({
      type: 'error',
      message: (error as Error).message,
    })
  }
}

onMounted(() => {
  getprimaryOption()
})
</script>

<style scoped></style>
